<template>
  <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="auto" v-show="showSearch">
        <el-form-item label="订单号" prop="no">
          <el-input v-model="queryParams.no" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <!-- <el-form-item label="渠道转账单号" prop="channelTransferNo">
          <el-input v-model="queryParams.channelTransferNo" placeholder="请输入渠道转账单号"></el-input>
        </el-form-item> -->
        <el-form-item label="收款人账号" prop="userAccount">
          <el-input v-model="queryParams.userAccount" placeholder="请输入收款人账号"></el-input>
        </el-form-item>
        <el-form-item label="收款人姓名" prop="userName">
          <el-input v-model="queryParams.userName" placeholder="请输入收款人姓名"></el-input>
        </el-form-item>
        <el-form-item label="转账状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="转账状态" clearable style="width: 200px">
               <el-option
                  v-for="dict in dict.type.transfer_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
        <el-form-item label="时间" prop="dateRange">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00','23:59:59']"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="list">
        <el-table-column label="id" align="center" prop="id"/>
        <el-table-column label="订单类型" align="center" prop="transferKey">
          <template slot-scope="{row}">
            <dict-tag :options="dict.type.transfer_order_type" :value="row.transferKey" />
          </template>
        </el-table-column>
        <el-table-column label="应用名称" align="center" prop="appName"/>
        <el-table-column label="转账金额" align="center" prop="price"/>
        <el-table-column label="转账状态" align="center" prop="status">
          <template slot-scope="{row}">
            <dict-tag :options="dict.type.transfer_status" :value="row.status" />
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" prop="no"/>
        <el-table-column label="收款人姓名" align="center" prop="userName"/>
        <el-table-column label="收款账号" align="center" prop="userAccount"/>
        <el-table-column label="转账标题" align="center" prop="subject"/>
        <el-table-column label="转账成功时间" align="center" prop="successTime"/>
        <el-table-column label="创建时间" align="center" prop="createTime"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button
              type="text"
              @click="handleDetail(row)"
              v-hasPermi="['trade:agentPileRecord:query']">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 查看详情对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
        <el-form ref="formRef" :model="form" label-width="100px">
          <el-row class="diy-text-sm diy-leading-10" :gutter="10">
            <el-col :span="item.span || 12" v-for="(item,index) in formDetail" :key="index">
              <div style="display:flex;" :class="[item.prop == 'channelNotifyData' ? '' :'flex_hcneter']">
                <svg-icon icon-class="dot" class-name='diy-text-primary diy-mr-1' 
                :style="{
                'margin-top':item.prop == 'channelNotifyData' ? '8px' : '',
                'font-size':item.prop == 'channelNotifyData' ? '22px' : '20px',
                }"
                style="font-size:20px"/>
                <div v-if="item.isCustom" class="flex_hcneter">
                  {{item.label}}：<dict-tag :options="dict.type[item.zidian]" :value="form[item.prop]"/>
                </div>
                <div class="flex_flex" v-else>{{item.label}}：{{ form[item.prop] }}</div>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="open = false">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script >
import {transferList,transferDetail,} from "@/api/finance/transferReceipt";
export default {
name: 'TransferReceipt',
dicts: ['transfer_status','transfer_order_type',],
components: {  },
data() {
  return {
    // 遮罩层
    loading: true,
    // 显示搜索条件
    showSearch: true,
    queryParams: {// 查询参数
      pageNum: 1,no:null,channelTransferNo:null,
      pageSize: 10,dateRange:[],userAccount:null,userName:null,
    },
    // 总条数
    total: 0,
    list:[],//页面数据
    form: {},// 表单参数
    // 弹出层标题
    title: "",
    // 是否显示弹出层
    open: false,
    formDetail:[
      {label:'订单类型',prop:'transferKey',isCustom:true,zidian:'transfer_order_type',},
      {label:'应用名称',prop:'appName',},{label:'转账金额',prop:'price',},{label:'转账状态',prop:'status',isCustom:true,zidian:'transfer_status',},
      {label:'订单号',prop:'no',},{label:'收款人姓名',prop:'userName',},{label:'收款账号',prop:'userAccount',},
      {label:'转账标题',prop:'subject',},{label:'转账成功时间',prop:'successTime',},
      {label:'商户转账单编号',prop:'merchantTransferId',},{label:'渠道转账单号',prop:'channelTransferNo',},
      {label:'通知URL',prop:'notifyUrl',span:24,},{label:'转账渠道通知内容',prop:'channelNotifyData',span:24,},
    ],
  };
},
mounted(){
  this.getList()
},
methods: {
  handleDetail(row) {//查看详情
    const id = row.id
    this.open = true;
    this.title = "查看详情";
    transferDetail(id).then(async response => {
      let data = response.data || {}
      this.form = {
        ...data,
        price: this.math.divide( data.price || 0,100),
      }
    });
  },
  getList() {
    this.loading = true;
    let queryParams = {...this.queryParams}
    let dateRange = this.queryParams.dateRange || []
    if(dateRange.length) {
      queryParams.startTime = dateRange[0]
      queryParams.endTime = dateRange[1]
    }
    delete queryParams.dateRange
    transferList(queryParams).then(response => {
      let rows = response.rows || [];
      this.list = rows.map(item=>{
        return {
          ...item,
          price: this.math.divide( item.price || 0,100),
        }
      })
      this.total = response.total || 0;
      this.loading = false;
    });
  },
  /** 搜索按钮操作 */
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  },
  /** 重置按钮操作 */
  resetQuery() {
    this.resetForm("queryRef");
    this.handleQuery();
  },
}
}
</script>
<style lang="scss" scoped>
.jine_block{
padding: 5px 10px;height: 45px;box-sizing: border-box;
border-radius: 5px;margin-right: 15px;
}
</style>